<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告</title>
    <style>
        .top{
            height: 120px;
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            /*使用固定定位,让顶部广告条紧贴html视口的顶部*/
            position: fixed;
            top: 0;
            /*width: 100%;*/
            /*视口 viewport 整个浏览器窗口的显示界面
            100vw视口宽度100%  100vh视口高度100%*/
            width: 100vw;
        }
        .main{
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
           background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, consectetur cumque deleniti doloribus eaque
        eligendi error ex ipsum minima mollitia nemo quae qui quis sit ut. Commodi eligendi in natus.
    </div>
    <div>Aliquam animi architecto autem consequuntur corporis culpa dolor esse et fugit, labore nam nemo neque nihil
        perspiciatis possimus quia ratione reiciendis saepe sapiente similique soluta tempora tempore vel veniam
        voluptates!
    </div>
    <div>Aliquid architecto consectetur cum delectus dolor eos excepturi impedit ipsa maxime, mollitia nulla, obcaecati
        officiis quae quod vel. Cumque doloremque facilis fugiat iure minus nostrum provident repellat ullam veritatis
        voluptatem?
    </div>
    <div>Accusamus animi culpa deserunt eos ipsa, iusto laudantium placeat quae sapiente! Commodi debitis doloribus in
        maiores minima nam nobis numquam quaerat tempore? Et fuga, non nulla quis repellat veritatis. Quaerat!
    </div>
    <div>Ad aliquam aut delectus excepturi inventore necessitatibus numquam, quia quibusdam ratione. Alias atque
        deleniti earum esse impedit itaque laboriosam magni maiores officia soluta, totam vel. Libero placeat recusandae
        sequi velit?
    </div>
    <div>Consequatur consequuntur culpa cum, dolores ea eaque explicabo fugiat illo ipsam minus nam nesciunt nobis
        perspiciatis quasi quia ratione recusandae reiciendis rem repellat repellendus rerum vel veritatis voluptate
        voluptatem voluptates?
    </div>
    <div>Aliquam ea, error ipsum itaque maxime minus modi necessitatibus quae quis reiciendis repellendus sed sequi
        temporibus tenetur veritatis. Accusantium id ipsa labore magnam nemo perferendis provident quas quod sapiente,
        similique?
    </div>
    <div>Debitis explicabo ipsa maiores, nobis officiis sit! Adipisci consectetur dolores error esse est explicabo hic
        iure iusto maiores nostrum, officia possimus quasi quos ratione recusandae rerum unde ut voluptas voluptatem!
    </div>
    <div>Aut consectetur corporis doloribus fugiat illo nemo numquam perspiciatis praesentium quasi quia sed sint sit
        soluta tempora totam ut vel voluptates, voluptatibus! Accusamus aperiam deleniti iure nemo nobis numquam,
        possimus.
    </div>
    <div>Accusantium animi asperiores at blanditiis consectetur corporis ducimus eaque enim molestias, neque obcaecati
        pariatur praesentium quaerat quidem quis ratione repellendus saepe sed similique sit totam ullam unde! Nulla,
        provident velit.
    </div>
</div>
</body>
</html>